<template>
<!-- 文章列表项 -->
  <!-- <div class="article-item"></div> -->
  <van-cell class="article-item">
    <div slot="title" class="title van-ellipsis">{{article.title}}</div>
    <div slot="label">
      <div class="cover-warp" v-if="article.cover.type === 3">
        <div class="cover-warp-item">
          <van-image v-for="(img,index) in article.cover.images" :key="index" :src="img" width="116" height="73" fit="cover">
          </van-image>
        </div>
      </div>
      <div class="label-warp">
        <span>{{article.aut_name}}</span>
        <span>{{article.comm_count}}评论</span>
        <span>{{article.pubdate | relativeTiem}}</span>
      </div>
    </div>
    <van-image v-if="article.cover.type === 1" :src="article.cover.images[0]" width="116" height="73" fit="cover">

    </van-image>
  </van-cell>
</template>

<script>
import display from '@/utisl/dayjs'
export default {
    name:"ArticleItem",
    props:{
      article:{
        type:Object,
        required:true
      }
    }
}
</script>

<style lang="less" scoped>
  .article-item{
    .title{
      font-size: 16px;
      color: #3a3a3a;
    }
    /deep/.van-cell__value{
      flex: unset;
      width:116px;
      height:73px;
      margin-left: 12px;
    }
    .cover-warp-item{
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      .van-image:not(:last-child){
        padding-right: 4px;
      }
    }
    .label-warp{
      font-size: 12px;
      &:span:not(:last-child){
        margin-right:10px;
      }
    }
  }
</style>